<template>
  <div class="wxCharges">
    <div class="charges_top">
      <section class="achievement_header">
        <span :class="[current == 1 ?'active':'']"
              @click="selectItem(1)">昨天</span>
        <span :class="[current == 2 ?'active':'']"
              @click="selectItem(2)">本月</span>
        <span :class="[current == 0 ?'active':'']"
              @click="selectItem(0)">今天</span>
      </section>
      <div>
        <div v-if="sort != 0">
          <p>{{sort}}</p>
          <p>您的排名</p>
        </div>
        <div v-else>
          <p></p>
          <p>您当前出单量为0，没有排名</p>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="list-title">
        <span>排名</span>
        <span>会员</span>
        <span>出单量</span>
      </div>
      <van-list v-show="list.length"
                v-model="loading"
                :error.sync="error"
                error-text="请求失败，点击重新加载"
                :finished="finished"
                @load="onLoad">
        <div class="list-item"
             v-for="(item, index) in list"
             :key="index">
          <span>
            <i :class="getCls(item.sort)">{{getText(item.sort)}}</i>
          </span>
          <span>{{item.nickname}}</span>
          <span>{{item.order_num}}</span>
        </div>
      </van-list>
      <no-data v-show="!list.length && finished"
               :noData="noData"></no-data>
    </div>
  </div>
</template>

<script>
import noData from '@/components/noData/index'
import Vue from 'vue'
import { List } from 'vant'
import { getDhsOrderRanking } from '@/api/user/dhs/dhsApi'

Vue.use(List)
export default Vue.extend({
  data() {
    return {
      noData: {
        width: '60%',
        img: 'https://img.wifenxiao.com/h5-wfx/images/user/no-order-rank.png',
        text: '暂无排名',
        txtMarginTop: '-30px'
      },
      current: 0,
      sort: null,
      ftitle_agents: '',
      commission_name: '',
      p: 2,
      list: [],
      error: false,
      loading: false,
      finished: false
    }
  },
  created() {
    this.init()
  },
  methods: {
    init(val = 0) {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      getDhsOrderRanking({ time_type: val }).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.display_sort_type = res.data.display_sort_type
          this.sort = res.data.self_sort
          this.commission_name = res.data.commission_name

          this.list = res.data.data
          this.finished = true
          this.current = val
          // }
        } else {
          this.$Error(res.msg)
        }
      })
    },
    selectItem(val) {
      if (this.current == val) return
      this.init(val)
    },
    onLoad() { },
    getCls(sort) {
      if (sort <= 3) {
        return `icon icon${sort}`
      } else {
        return 'text'
      }
    },
    getText(sort) {
      if (sort > 3) {
        return sort
      }
    }
  },
  components: {
    noData
  }
})
</script>

<style lang="scss">
@import "src/styles/variables";
@import "src/styles/mixin";

.charges_top {
  height: 360px;
  // line-height: 80px;
  text-align: center;
  background-color: #f0f0f0;
  background: url("https://img.wifenxiao.com/h5-wfx/images/user/point_bg_rank.png") no-repeat;
  background-size: 100% 100%;
  padding: 35px 0 0;
  color: #fff;
  .achievement_header {
    width: 60%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-content: center;
    height: 48px;
    border: 2px solid #fff;
    border-radius: 26px;
    box-sizing: content-box;
    overflow: hidden;
    span {
      display: block;
      line-height: 48px;
      flex: 1;
      text-align: center;
      color: $default;
      &.active {
        background-color: $default;
        color: #F30C23;
      }
    }
  }
  p:first-child {
    font-size: 50px;
    font-weight: bold;
    margin-top: 30px;
  }
  p:last-child {
    font-size: 26px;
    margin-top: 20px;
    color: #FFD9DD;
    letter-spacing: 2px;
  }
}
.wxCharges {
  .no-data img {
    width: 60% !important;
  }
}
.list {
  margin: -100px 25px 0;
  background-color: $default;
  border-radius: 20px;
  overflow: hidden;
  padding: 0 30px;
  &-title {
    display: flex;
    align-items: center;
    height: 96px;
    border-bottom: 1px solid #EDEDED;
    span {
      font-size: 26px;
      &:nth-child(1) {
        margin-left: 25px;
         width: 210px;
      }
      &:nth-child(2) {
        width: 230px;
      }
      &:nth-child(3) {
        width: 190px;
        text-align: center;
      }
    }
  }
  &-item {
    height: 120px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #EDEDED;
    span {
      font-size: 28px;
      &:nth-child(1) {
        margin-left: 25px;
        width: 210px;
      }
      &:nth-child(2) {
        width: 230px;
        @include showEllipsis;
      }
      &:nth-child(3) {
        width: 190px;
        font-size: 32px;
        font-weight: bold;
        color: #FD2049;
        text-align: center;
      }
      .icon,
      .text {
        width: 80px;
        height: 53px;
        line-height: 40px;
        font-weight: bold;
        text-align: center;
        float: left;
        background-size: auto 100%;
        background-position: center;
        background-repeat: no-repeat;
        &.icon1 {
          background-image: url("https://img.wifenxiao.com/h5-wfx/images/user/No1.png");
        }
        &.icon2 {
          background-image: url("https://img.wifenxiao.com/h5-wfx/images/user/No2.png");
        }
        &.icon3 {
          background-image: url("https://img.wifenxiao.com/h5-wfx/images/user/No3.png");
        }
      }
    }
    &:first-child {
      border-top: none;
    }
    &:last-child {
      border-bottom: none;
    }
  }
}
</style>
